<template>
  <div class="app-container">
    <meta name="format-detection" content="telephone=yes" />

    <div>
      <van-nav-bar title="确认订单"
                   left-text="返回"
                   @click-left="onClickLeft"
                   left-arrow
      />
    </div>

    <div class="container">
      <div>

        <div  v-if="agencyAddressList.length > 0 " style="display: flex;flex-direction: row" @click="gotoAddressList" >
          <div style="display: flex;flex-direction: column">

            <div style="padding-top: 15px;padding-left: 20px;font-size: 16px;font-weight: bold"> {{agencyAddressList.length > 0 ? agencyAddressList[0].name : '' }}  {{agencyAddressList.length > 0 ? agencyAddressList[0].tel : '' }} </div>
            <div style="display: flex;flex-direction: row;padding-left: 20px;padding-top: 10px;font-size: 14px;padding-bottom: 10px;" >
              <van-tag type="danger" v-if="agencyAddressList.length > 0 && agencyAddressList[0].mrflag == '1' ">默认</van-tag>
              <label style="padding-left: 10px;">{{agencyAddressList.length > 0 ? agencyAddressList[0].province  + agencyAddressList[0].city + agencyAddressList[0].county + agencyAddressList[0].addressDetail : ''}}</label>
            </div>

          </div>

          <div style="padding-top: 20px;padding-left: 20px;font-size: 16px;">
            >
          </div>

        </div>

         <div style="height: 70px; font-size: 30px; display: flex;justify-content: center;align-content: center;align-items: center;color: deepskyblue" @click="addAddress" v-if="agencyAddressList.length == 0 ">

           <label>新增收货地址 > </label>

         </div>

         <van-divider />


        <div style="font-size: 20px;background-color: white">
          <van-card
            :num="selectedNum"
            :price="price"
            :desc="skuName"
            :title="name"
            :thumb="imageUrl"
            style="font-size: 16px;"
          />
        </div>

        <div>

       <!--   <van-field label="收货地址:" label-width="25%" placeholder="请输入" v-model="shdz"  />
          <van-field label="联系人:" label-width="25%" placeholder="请输入" v-model="lxrname" />
          <van-field label="联系电话:" label-width="25%" placeholder="请输入" v-model="lxrdh"  />-->

          <van-field label="留言:" label-width="10%" placeholder="请输入" v-model="message"  />

          <van-cell title="当前积分总额(分)：" v-model="zhye" />

          <van-cell title="是否全额抵扣:" label-width="30%">
            <van-radio-group v-model="qedkflag" direction="horizontal" @change="onChangeDkflag">
              <van-radio name="1">是</van-radio>
              <van-radio name="2">否</van-radio>
            </van-radio-group>
          </van-cell>

          <van-field v-if="qedkflag == '2' " v-model="kcjfnum" type="number" label-width="40%" label="本次扣除积分额度："  placeholder="请输入" @input="onInputKcjfnum" />

          <div style="padding-top: 10px;padding-left: 20px;padding-right: 20px;font-size: 16px;color:red;padding-bottom: 50px;line-height: 30px;">
            提示：消费后剩余积分：{{syjfnum}} , 扣除积分后您还需要交费: {{xyjfje}}元
          </div>

        </div>

        <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit" label="合计(分)：" />

        <div>

        </div>

      </div>

    </div>

  </div>
</template>

<script>
  import {queryShareInfo,addShareLy,queryShareLy,addShareStoreInfo ,addLyhfinfo,queryAgencyinfo,queryProductSku,queryAgenyAddress ,queryAddressById , saveAgencyOrder,queryZhyeByAgencyid } from 'api/api'
  import {Toast} from 'vant'
  import {floatAdd , floatSub ,floatMul ,floatDiv } from '../../utils/NumberUtil'
  import eventBus from '../../utils/eventbus'
  export default {
    name: 'confirmOrder',
    data() {
      return {
        pageSize:1,
        goodsInfo :{},
        productId:'',
        skuId:'',
        selectedNum:'',
        price:'',
        totalPrice :'',
        name:'',
        skuName:'',
        imageUrl:'',
        agencyId:'',
        agencyAddressList:[],
        addressInfo:{},
        message:'',
        shdz:'',
        lxrname:'',
        lxrdh:'',
        zhye:"0.00",
        qedkflag:'1',
        kcjfnum:'',
        syjfnum:'0',
        xyjfje:'0'
      }
    },
    created() {
      let agencyIdStore = this.$store.getters.agencyId
      if(agencyIdStore){
        this.agencyId = agencyIdStore
      }else{
        this.agencyId = this.$route.query.agencyId
      }

      console.log('agencyId:',this.agencyId)

      this.productId =  this.$route.query.productId
      this.skuId =  this.$route.query.skuId
      this.selectedNum = this.$route.query.selectedNum
      this.price = this.$route.query.price
      this.totalPrice = this.price * this.selectedNum * 100

      this.queryAgenyAddress()
      console.log('经销商ID:',this.agencyId)
      this.queryProductSku()
      this.queryZhyeByAgencyid()

      window.onscroll = function(){
        //变量scrollTop是滚动条滚动时，距离顶部的距离
        var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
        //变量windowHeight是可视区的高度
        var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        //变量scrollHeight是滚动条的总高度
        var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
        //滚动条到底部的条件
        if(scrollTop+windowHeight==scrollHeight){
          //写后台加载数据的函数
          this.pageSize = this.pageSize + 1
        }
      }
    },

    activated(){

         console.log('activated执行力')

         console.log('agencyId:',this.agencyId)
         //根据key名获取传递回来的参数，data就是map
         eventBus.$on('addressInfo', function(data){

           this.productId =  data.productId
           this.skuId =  data.skuId
           this.selectedNum = data.selectedNum
           this.price = data.price
           this.totalPrice = data.totalPrice
           this.queryProductSku()

           this.agencyAddressList = []
           this.agencyAddressList[0] = data
           console.log("地址：",data);
           //this.$destroy(true)

         }.bind(this));
       },

    methods: {

      queryAgencyinfo(){

        let param = {agencyid:this.agencyId}
        let that = this
        queryAgencyinfo(param).then(res =>{
          if(res.code == 200 ){
            console.log(res)
            that.agencyInfo = res.data
            if(res.data){
              that.fromname = res.data.agencyName
            }
          }
        })
      },

      queryZhyeByAgencyid(){

       let param = {agencyId:this.agencyId}
        let that = this
        queryZhyeByAgencyid(param).then(res =>{
          if(res.code == 200 ){
            if(res.data){
              that.zhye = res.data.zhye
              let zhyenum = parseFloat(that.zhye)
              let totalPrice = parseFloat(that.totalPrice)
              if(zhyenum >= floatDiv(totalPrice,100)){
                that.syjfnum = floatSub(zhyenum,floatDiv(totalPrice,100))
                that.kcjfnum = parseFloat(floatDiv(totalPrice,100))
              }else{
                let xyjfje = floatSub(floatDiv(totalPrice,100),zhyenum)
                that.xyjfje = xyjfje
                that.kcjfnum = parseFloat(zhyenum)
              }
            }else{
              let zhyenum = 0
              let totalPrice = parseFloat(that.totalPrice)
              if(zhyenum >= floatDiv(totalPrice,100)){
                that.syjfnum = floatSub(zhyenum,floatDiv(totalPrice,100))
                that.kcjfnum = parseFloat(floatDiv(totalPrice,100))
              }else{
                let xyjfje = floatSub(floatDiv(totalPrice,100),zhyenum)
                that.xyjfje = xyjfje
                that.kcjfnum = parseFloat(zhyenum)
              }
            }
          }
        })
      },

      onInputKcjfnum(value){

        if(!this.zhye || this.zhye == 0 ){
          return
        }

        if(!value){
          value = 0
        }
        let totalPrice = parseFloat(this.totalPrice)
        let zhye = parseFloat(this.zhye)
        let bckc = parseFloat(value)
        if(bckc < floatDiv(totalPrice,100)){
          this.syjfnum = floatSub(zhye,bckc) //剩余积分
          this.xyjfje = floatSub(floatDiv(totalPrice,100),bckc) //剩余需要交费金额
        }else{
          this.xyjfje = 0
          this.syjfnum =floatSub(zhye,floatDiv(totalPrice,100))
        }
      },

      queryProductSku(){
        let param = {}
        param.productId  = this.productId
        param.skuId = this.skuId
        console.log(param)
        queryProductSku(param).then(res =>{
          if(res.code == 200 ){
            let skuList = res.rows
            if(skuList.length > 0){
              this.name = skuList[0].productName;
              this.skuName = skuList[0].skuName;
              this.imageUrl = skuList[0].skuImageUrl;
            }
          }
        })


      },

      addAddress(){
        this.$router.push({ path: '/addAddress', query:{ agencyId:this.agencyId ,productId:this.productId,skuId:this.skuId,selectedNum:this.selectedNum,price:this.price,totalPrice:this.totalPrice} })
      },

      gotoAddressList(){
        this.$router.push({ path: '/addressList', query:{ agencyId:this.agencyId,productId:this.productId,skuId:this.skuId,selectedNum:this.selectedNum,price:this.price,totalPrice:this.totalPrice } })
      },

      onClickLeft(){
        this.$router.go(-1) // 返回上一层
      },

      onChangeDkflag(e){
        this.qedkflag = e
        let that = this
        if(e == '1'){
          that.kcjfnum = 0
          if(!that.zhye){
            that.zhye = 0
          }
          let zhyenum = parseFloat(that.zhye)
          let totalPrice = parseFloat(that.totalPrice)
          if(zhyenum >= floatDiv(totalPrice,100)){
            that.syjfnum = floatSub(zhyenum,floatDiv(totalPrice,100))
            that.xyjfje = 0
            that.kcjfnum = parseFloat(floatDiv(totalPrice,100))
          }else{
            let xyjfje = floatSub(floatDiv(totalPrice,100),zhyenum)
            that.xyjfje = xyjfje
            that.syjfnum = 0
            that.kcjfnum = parseFloat(zhyenum)
          }
        }

        if(e == '2'){
          that.kcjfnum = 0
        }

      },

      queryAgenyAddress(){

        let param = {mrflag:'1'}
        param.agencyId  = this.agencyId
        console.log('经销商id:',this.agencyId)
        queryAgenyAddress(param).then(res =>{
          if(res.code == 200 ){
            let agencyAddressList  = res.rows
            this.agencyAddressList = agencyAddressList

          }
        })
      },

      onInput(message){
        this.message = message
      },


      onSubmit(){
        let param = {}
        param.agencyId = this.agencyId
        param.addressId = this.agencyAddressList[0].addressId
        param.productId = this.productId
        param.skuId = this.skuId
        param.skuname = this.skuName
        param.productnum = this.selectedNum
        param.productPrice = this.price
        param.totalprice = floatDiv(parseFloat(this.totalPrice),100)
        param.message = this.message
        param.productname = this.name
        param.imageUrl = this.imageUrl
        param.zhye = this.zhye           //扣除积分前账户余额
        param.xyjfje = this.xyjfje       //扣除积分后需要交费金额
        param.syjfje = this.syjfnum     //剩余积分
        param.bckcjfje = this.kcjfnum   //本次扣除积分金额
        param.shdz = this.shdz
        param.qedkflag = this.qedkflag   //是否全额扣除积分

        if(param.zhye == 0 ){
          param.bckcjfje = 0
        }

        console.log('订单参数',param)
        saveAgencyOrder(param).then(res =>{
          if(res.code == 200 ){
            let orderId = ''
            if(res.data){
              orderId = res.data.orderId
              this.$router.push({ path: '/storepay', query:{ orderId :orderId , totalPrice:param.xyjfje} })
            }
          }
        })
      },

      onInputShdz(value){
        this.shdz = value
      },
      onInputLxrname(value){
        this.lxrname  = value
      },

      onInputLxrdh(value){
        this.lxrdh  = value
      }

    },

  }
</script>

<style scoped>

  .container{
    background-color: white;
  }

  .liuyan{
    background-color: white;
    margin-top: 20px;
    padding-bottom: 60px;
  }
  .columnr{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .rownr{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
  }

  .name{
    padding-top: 10px;
    padding-left: 10px;
    font-size: 20px;
    color: #466BAC;
  }

  .img{
    padding-top: 10px;
    padding-left: 10px;
  }

  .content{
    font-size: 16px;
    padding:10px;
    text-indent: 2em;
  }

  .viewimg{
    width: 90%;
    padding-top: 10px;
    padding-left: 5%;
    padding-right: 4%;
  }

  .title_bg{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding:10px
  }
  .title_sx{
    height: 20px;
    width: 3px;
    background-color: #f50;
  }
  .title_name{
    color:#333333;
    font-size: 20px;
    margin-left: 5px;
    font-weight: bold;
  }

  .hfcontent{
    padding-top: 10px;
    padding-left: 60px;
    font-size: 16px;
  }

  .lyban{
    width: 99%;
    position: fixed;
    bottom: 0;
    height: 50px;
    background-color: #ffffff;
    border-top: 1px solid #B2B2B2 ;
  }

  .lytextcss{
    margin-top:8px;
    margin-left:10px;
    border-radius:15px;
    border: 1px solid #B2B2B2;
    width: 90%;
    height: 30px;
  }

  .textareacss{
    margin-left:10px;
    margin-right:10px;
    margin-top: 10px;
    margin-bottom: 20px;
    border: 1px solid #B2B2B2;
  }

  .hfcss{
    padding-left: 60px;
    padding-top: 10px;
    font-size: 16px;
  }

</style>
